<template>
	<view class="reply_s">
		<view class="com">
			<view class="user_name">匿名
				<u-icon name="integral" color="#ec693f"></u-icon>
			</view>
			<label class="sub_time">今天10:14</label>
			<view class="ph">
				你说的太对了
			</view>
			<view class="rep">
				<label class="m">回复:</label>
				<label>“ 猫咪在落叶里打滚儿，晚霞铺满天空，风把思念吹向你，我贪恋的人间不过是你而已。”</label>
			</view>
			<view class="bottom_fu">
				<view class="left">
					<u-icon name="heart" @click="point_an" size="30rpx" :color="zang.color"></u-icon>
					<label class="txt">{{zang.count}}</label>
				</view>
				<view class="right">
					<view class="ii" @click="huifu">
						<u-icon name="chat" size="30rpx"></u-icon>
						<label class="txt">1</label>
						<label class="txt">回复</label>
						<u-popup v-model="show" mode="center" width="85%" height="auto" border-radius="14">
							<view class="bg">
								<view class="forms">
									<u-form :model="form" ref="uForm">
										<u-form-item label="昵称" left-icon="man-add" label-width="200rpx" prop="stuname">
											<u-input v-model="form.name" />
										</u-form-item>
										<u-form-item label="回复内容" left-icon="edit-pen" label-width="200rpx" prop="edit">
											<u-input v-model="form.edit" placeholder="输入回复内容" type="textarea"
												:auto-height="true" />
										</u-form-item>
									</u-form>
									<u-button @click="submit" size='medium'>提交</u-button>
								</view>
							</view>
						</u-popup>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'reply',
		data() {
			return {
				show:false,
				zang: {
					color: '',
					count: 1
				},
				form:{
					name:'',
					edit:''
				},
				rules: {
					name: [{ required: false, }],
					edit: [{
						required: true,
						message: '还未输入要回复的内容',
					}],
				}
			}
		},
		methods: {
			point_an() {
				this.zang.color = '#E8222D'
				// 判断用户是否点赞且只能点赞一次
				this.zang.count++
			},
			huifu() {
				this.show = true
			},
			submit() {
				let that = this
				if (this.$rules(this.form, this.rules)) {
					uni.showLoading({
						title: '提交中...',
						success: res => {
							that.show = false
						}
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.reply_s {
		width: 750rpx;
		min-height: 200rpx;
		.com {
			width: 750rpx;
			min-height: 250rpx;
			border: 1px lightgray solid;
			border-radius: 0 0 10px 10px;
			display: flex;
			align-content: center;
			flex-direction: column;
			justify-content: space-between;

			.sub_time {
				font-size: 22rpx;
				margin-left: 10rpx;
				font-family: "楷体";
				height: 20rpx;
				margin-top: -10rpx;
				margin-bottom: 10rpx;
				color: gray;
			}

			.user_name {
				margin: 12rpx 15rpx;

				u-icon {
					margin-left: 5rpx;
				}
			}
			.rep{
				margin-left: 20rpx;
				width: 95%;
				min-height: 100rpx;
				line-height: 45rpx;
				padding-left: 10rpx;
				padding-right: 5rpx;
				text-align: justify;
				border: 1px gray solid;
				margin-top: -15rpx;
				margin-bottom: 20rpx;
				.m{
					width: 100rpx;
					color: gray;
					height: 10rpx;
					font-size: 24rpx;
					margin-top: -80rpx;
					position: relative;
				}
			}
			.ph {
				margin-left: 20rpx;
				width: 95%;
				min-height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 40rpx;
				padding-left: 10rpx;
				padding-right: 5rpx;
				text-align: justify;
			}

			.bottom_fu {
				margin-bottom: 10rpx;

				.bg {
					width: 100%;
					height: 100%;
					background-image: linear-gradient(to bottom, #f1ac9d, #B9EDF8);
					.forms {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
					}
				}
				.txt {
					font-size: 25rpx;
				}
				.left {
					float: left;
					margin-left: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.right {
					float: right;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;

					.ii {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 5rpx;
					}
				}
			}
		}
	}
</style>
